<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ColorPane</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
}
#colorPane {
	font-size:12px;
	color:#666;
}
#colorPreview {
	width:100px;
	height:100px;
	border:3px solid #999;
	background-color:#000;
	padding:5px;
}
.colorSlider {
	position:relative;
	width:260px;
	height:34px;
	border:1px solid #999;
	background-color:#000;
}
.colorBar {
	position:relative;
	top:-34px;
	width:5px;
	height:30px;
	cursor:pointer;
}
.fill {
	position:relative;
	width:0px;
	height:30px;
}
#rFill {
	background-color:#F00;
	border-top:2px solid #D00;
	border-bottom:2px solid #D00;
	border-left:2px solid #D00;
}
#gFill {
	background-color:#0F0;
	border-top:2px solid #0D0;
	border-bottom:2px solid #0D0;
	border-left:2px solid #0D0;
}
#bFill {
	background-color:#00F;
	border-top:2px solid #00D;
	border-bottom:2px solid #00D;
	border-left:2px solid #00D;
}
#r {
	background-color:#F00;
	border-top:2px solid #D00;
	border-bottom:2px solid #D00;
	border-right:2px solid #D00;
}
#g {
	background-color:#0F0;
	border-top:2px solid #0D0;
	border-bottom:2px solid #0D0;
	border-right:2px solid #0D0;
}
#b {
	background-color:#00F;
	border-top:2px solid #00D;
	border-bottom:2px solid #00D;
	border-right:2px solid #00D;
}
</style>
<script type="text/javascript">
function toHex(n) {
	if(n<=15) {
		return "0"+n.toString(16).toUpperCase();
	}
	return n.toString(16).toUpperCase();
}
function updateColorPreview() {
	var r = $("#r").position().left;
	var g = $("#g").position().left;
	var b = $("#b").position().left;
	$("#rVal").html(r);
	$("#gVal").html(g);
	$("#bVal").html(b);
	$("#colorHex").html("#"+toHex(r)+toHex(g)+toHex(b));
	$("#rFill").css("width",r);
	$("#gFill").css("width",g);
	$("#bFill").css("width",b);
	$("#colorPreview").css("background-color","rgb("+r+","+g+","+b+")");
}
$(function() {
	$(".colorBar").draggable({
		"axis":"x",
		"opacity":0.7,
		"cursor":"pointer",
		"drag":function(event, ui) {
			var position = ui.position;
			if(position.left<=0) {
				position.left = 0;
			} else if(position.left>=255) {
				position.left = 255;
			} else {}
			updateColorPreview();
		}
	});
});
</script>
</head>
<body>
<div id="colorPane">
<table border="0">
<tr>
	<td rowspan="3"><div id="colorPreview"><div id="colorHex">#000000</div></div></td>
	<td><div class="colorSlider"><div id="rFill" class="fill"></div><div id="r" class="colorBar"></div></div></td>
	<td><div id="rVal">0</div></td>
</tr>
<tr>
	<td><div class="colorSlider"><div id="gFill" class="fill"></div><div id="g" class="colorBar"></div></div></td>
	<td><div id="gVal">0</div></td>
</tr>
<tr>
	<td><div class="colorSlider"><div id="bFill" class="fill"></div><div id="b" class="colorBar"></div></div></td>
	<td><div id="bVal">0</div></td>
</tr>
</table>
</div>
</body>
</html>